<template>
<el-container>
     <el-header>健康档案系统</el-header>
  <el-container style="height: 750px; border: 1px solid #409EFF">
  <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
    <el-menu :default-openeds="['1', '2']">
      <el-submenu index="1">
        <template slot="title"><i class="el-icon-message"></i>体检信息</template>
        <el-menu-item index="1-2" @click="page = 1"><i class="el-icon-monitor"></i>显示</el-menu-item>
        <el-menu-item index="1-1" @click="page = 2"><i class="el-icon-folder-add"></i>添加</el-menu-item>
        
        </el-submenu>
        <el-submenu index="2">
        <template slot="title"><i class="el-icon-message"></i>病历信息</template>
        <el-menu-item-group>
          <el-menu-item index="2-1" @click="page = 3"><i class="el-icon-monitor"></i>显示</el-menu-item>
          <el-menu-item index="2-2" @click="page = 4"><i class="el-icon-folder-add"></i>添加</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      
    </el-menu>
  </el-aside>
  
  <el-container>
    
    
    <el-main>
      <div v-if="page == 0">
        <h2>欢迎使用健康档案管理</h2>
      </div>
      <div v-else-if="page == 2">
        <DanganAdd></DanganAdd>
      </div>
      <div v-else-if="page == 4">
        <BingliAdd></BingliAdd>
      </div>
      <div v-else-if="page == 1">
        <DanganDisplay></DanganDisplay>
      </div>
      <div v-else-if="page = 3">
        <bingli-display></bingli-display>
      </div>
    </el-main>
  </el-container>
  </el-container>
</el-container>
        
</template>


<style>
  .el-header {
    background-color: #409EFF;
    color: #333;
    line-height: 60px;
  }
  
  .el-aside {
    color: #409EFF;
  }
</style>

<script>
import DanganAdd from '../components/DanganAdd.vue';
import BingliAdd from '../components/BingliAdd.vue';
import DanganDisplay from '../components/DanganDisplay.vue'
import BingliDisplay from '../components/BingliDisplay.vue'
  export default {
      components: { 
        DanganAdd,
        BingliAdd,
        DanganDisplay,
        BingliDisplay
      },
    name:'Menu',
    data() {
      const item = {
        welcome:"欢迎使用健康档案管理系统",
      };
      return {
        tableData: Array(1).fill(item),
        page: 0
      }
    },
    methods: {
      Danganadd() {
        this.$router.push('/DanganAdd')
      }
    }
  };

</script>
<style scoped>
  .el-header{
    background-color: #409EFF;
    text-align: center;
    font-size: 36px;
    color: white;
  }
</style>